import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { ContactFormData, validateContactForm } from '@/lib/api/contact'

export const ValidationTest: React.FC = () => {
  const { t, i18n } = useTranslation()
  const [testData] = useState<ContactFormData>({
    name: '',
    email: 'invalid-email',
    company: '',
    subject: 'hi',
    message: 'short'
  })

  const [errors, setErrors] = useState<any>({})

  React.useEffect(() => {
    const validation = validateContactForm(testData)
    setErrors(validation.errors)
  }, [testData])

  const changeLanguage = (lang: string) => {
    i18n.changeLanguage(lang)
  }

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-lg">
      <h2 className="text-2xl font-bold mb-6">表单验证错误翻译测试</h2>

      <div className="mb-6">
        <p className="mb-4">切换语言测试错误提示的翻译：</p>
        <div className="flex gap-4 mb-4">
          <button
            onClick={() => changeLanguage('zh')}
            className={`px-4 py-2 rounded ${
              i18n.language === 'zh'
                ? 'bg-blue-500 text-white'
                : 'bg-gray-200 text-gray-700'
            }`}
          >
            中文
          </button>
          <button
            onClick={() => changeLanguage('ja')}
            className={`px-4 py-2 rounded ${
              i18n.language === 'ja'
                ? 'bg-blue-500 text-white'
                : 'bg-gray-200 text-gray-700'
            }`}
          >
            日本語
          </button>
        </div>
        <p className="text-sm text-gray-600">
          当前语言: {i18n.language === 'zh' ? '中文' : '日本語'}
        </p>
      </div>

      <div className="space-y-4">
        <h3 className="text-lg font-semibold">验证错误消息：</h3>

        <div className="space-y-3">
          {errors.name && (
            <div className="p-3 bg-red-50 border border-red-200 rounded">
              <p className="text-red-700 font-medium">姓名错误:</p>
              <p className="text-red-600">{t(`aboutPages.contact.${errors.name}`)}</p>
            </div>
          )}

          {errors.email && (
            <div className="p-3 bg-red-50 border border-red-200 rounded">
              <p className="text-red-700 font-medium">邮箱错误:</p>
              <p className="text-red-600">{t(`aboutPages.contact.${errors.email}`)}</p>
            </div>
          )}

          {errors.subject && (
            <div className="p-3 bg-red-50 border border-red-200 rounded">
              <p className="text-red-700 font-medium">主题错误:</p>
              <p className="text-red-600">{t(`aboutPages.contact.${errors.subject}`)}</p>
            </div>
          )}

          {errors.message && (
            <div className="p-3 bg-red-50 border border-red-200 rounded">
              <p className="text-red-700 font-medium">消息错误:</p>
              <p className="text-red-600">{t(`aboutPages.contact.${errors.message}`)}</p>
            </div>
          )}
        </div>

        {!Object.keys(errors).length && (
          <div className="p-3 bg-green-50 border border-green-200 rounded">
            <p className="text-green-700">✅ 所有字段验证通过</p>
          </div>
        )}
      </div>

      <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
        <h4 className="font-semibold text-blue-900 mb-2">其他翻译测试：</h4>
        <div className="space-y-1 text-sm text-blue-800">
          <p>发送中: {t('aboutPages.contact.sending')}</p>
          <p>字符计数: {t('aboutPages.contact.characters')}</p>
          <p>表单验证错误: {t('aboutPages.contact.formValidationError')}</p>
          <p>提交错误: {t('aboutPages.contact.submitError')}</p>
        </div>
      </div>
    </div>
  )
}

export default ValidationTest
